<template>
    <div class="internal">
        <return-internal :title="$route.params.item"></return-internal>
        <div class="context">
            <img :src="getimg(items.bankname)" alt="" class="img">
            <div class="name">{{ items.bankname }}</div>
            <div class="id">{{ getidAction(items.bankid) }}</div>
            <div class="see" v-if="show1" @click="show1 = !show1">
                <img src="../../../assets/images/nosee.png" alt="">
                <span>
                    隐藏卡号
                </span>
            </div>
            <div class="see" v-else @click="show1 = !show1">
                <img src="../../../assets/images/see.png" alt="">
                <span>
                    查看卡号
                </span>
            </div>

            <van-button type="danger" class="btn" @click="show = true">移除银行卡</van-button>
            <van-overlay :show="show" @click="show = false">
                <div class="wrapper" @click.stop>
                    <van-form class="from" @submit="onSubmit">
                        <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名" />
                        <van-field v-model="bankid" name="银行卡号" label="银行卡号" placeholder="请输入银行卡号" />
                        <van-field v-model="idcard" type="身份证号码" name="身份证号码" label="身份证号码" placeholder="请输入身份证号码" />
                        <div style="margin: 16px;">
                            <van-button round block type="info" native-type="submit">提交</van-button>
                        </div>
                    </van-form>
                </div>
            </van-overlay>

        </div>
    </div>
</template>

<script>
import axios from 'axios';
import img1 from '../../../assets/images/img1.jpg'
import img2 from '../../../assets/images/img2.png'
import img3 from '../../../assets/images/img3.jpg'
import img4 from '../../../assets/images/img4.jpg'
import img5 from '../../../assets/images/img5.jpg'
import { Form, Field, Button, Overlay, Toast, Dialog } from 'vant'
export default {
    components: {
        [Field.name]: Field,
        [Form.name]: Form,
        [Button.name]: Button,
        [Overlay.name]: Overlay,
        [Toast.name]: Toast,
        [Dialog.name]: Dialog
    },
    data() {
        return {
            items: {},
            show1: false,
            username: '',
            idcard: '',
            bankid: '',
            show: false
        }
    },
    methods: {
        async getcard() {
            let res = await axios.request({
                method: "post",
                url: "/api/bank/getbankinfo",
                data: { id: this.$route.params.id },
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token"),
                },
            });
            console.log(res);
            this.items = res.data.data;
        },
        getimg(name) {
            if (name == '中国农业银行') {
                return img1;
            } else if (name == '中国招商银行') {
                return img2;
            } else if (name == '中国建设银行') {
                return img3;
            } else if (name == '中国工商银行') {
                return img4;
            } else {
                return img5;
            }
        },
        getidAction(id) {
            if (id == undefined) {
                return
            };
            let carry = 0;
            let str = '';
            if (this.show1 == true) {

                for (let i = 0; i < id.length; i++) {
                    carry++;
                    str += id[i]
                    if (carry == 4) {
                        str += '\xa0\xa0\xa0\xa0 ';
                        carry = 0;
                    }
                }
                return str;
            } else {
                id = id.replace(/^.{16}/, '*'.repeat(16))
                for (let i = 0; i < id.length; i++) {
                    carry++;
                    str += id[i]
                    if (carry == 4) {
                        str += '\xa0\xa0\xa0\xa0 ';
                        carry = 0;
                    }
                }
                return str;
            }

        },
        async onSubmit() {
            let res = await axios.request({
                method: "post",
                url: "/api/bank/getbankbyid",
                data: { name: this.username, idcard: this.idcard, bankid: this.bankid },
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("token"),
                },
            });
            console.log(res);
            this.show = false;
            if (res.data.data != null) {
                Toast('身份验证成功')
                setTimeout(() => {
                    Dialog.confirm({
                        title: '',
                        message: '你确定要移除这张银行卡吗',
                    })
                        .then(async () => {
                            let res = await axios.request({
                                method: "post",
                                url: "/api/bank/delbank",
                                data: { name: this.username, idcard: this.idcard, bankid: this.bankid },
                                headers: {
                                    Authorization: "Bearer " + localStorage.getItem("token"),
                                },
                            });
                            console.log('===============删除', res);
                            Toast('删除成功');
                            this.$router.replace({ name: "electronic-card", params: { item: '银行卡管理' } });
                        })
                        .catch(() => {
                            // on cancel
                        });
                }, 2000)
                return
            }
            Toast('身份验证失败')
        }
    },
    mounted() {
        this.getcard();
    }
}
</script>

<style scoped lang="scss">
@function vw($px) {
    @return ($px/375) * 100vw;
}

.context {
    position: relative;
    top: 44px;
    width: 100%;
    height: calc(100% - 44px);
    background-color: rgb(1, 155, 130);

    .img {
        position: absolute;
        display: inline-block;
        width: vw(50);
        height: vw(47);
        border-radius: 50%;
        left: 50%;
        transform: translateX(-50%);
        top: vw(30);
    }

    .name {
        position: absolute;
        font-size: vw(17);
        left: 50%;
        transform: translateX(-50%);
        top: vw(100);
    }

    .id {
        width: 100%;
        position: absolute;
        text-align: center;
        top: vw(150);
        left: 50%;
        transform: translateX(-50%);
        font-size: vw(15);
    }

    .see {
        // width: 100%
        position: absolute;
        text-align: center;
        top: vw(200);
        left: 50%;
        transform: translateX(-50%);
        font: vw(17);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: vw(5);
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: vw(5);

        img {
            display: block;
            width: vw(24);
        }
    }
}

.from {
    position: relative;
    top: vw(300);
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}

.btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: vw(300);
    border-radius: vw(5);
}
</style>